<template>
    <div class="create-edit-modal-wrapper">
        <el-dialog :model-value="props.value" :title="dialog.title" :width="dialog.width" destroy-on-close>
            <el-form
                ref="ruleFormRef"
                :model="formData"
                :rules="ruleForm"
                label-width="110px"
                :disabled="callBack ? false : true"
            >
                <el-form-item label="协议名称" prop="handlerName">
                    <el-input
                        placeholder="请输入显示名"
                        v-model="formData.handlerName"
                        @input="value => (formData.handlerName = value.trim())"
                        maxlength="50"
                    />
                </el-form-item>
                <el-form-item label="Spi类型" prop="spiType">
                    <el-select placeholder="请选择类型" v-model="formData.spiType">
                        <el-option v-for="(value, key) in SpiType" :label="value" :key="key" :value="key" />
                    </el-select>
                </el-form-item>
                <el-form-item label="类路径" prop="handlerClass" style="width: 100%; margin-left: 0">
                    <el-input
                        placeholder="请输入类路径"
                        v-model="formData.handlerClass"
                        @input="value => (formData.handlerClass = value.trim())"
                        maxlength="50"
                    />
                </el-form-item>
                <el-form-item label="描述" style="width: 100%; margin-left: 0">
                    <el-input
                        v-model="formData.description"
                        type="textarea"
                        maxlength="200"
                        show-word-limit
                        placeholder="请输入描述"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="props.close">取消</el-button>
                    <el-button v-if="callBack ? true : false" type="primary" @click="submitForm" :loading="loading"
                        >确定</el-button
                    >
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus';
import { runSpiService } from '@great/services';
import { reactive, ref } from 'vue';
import type { PopupBoxProps } from '@great/utils';
import { useRequest } from 'vue-request';
import { SpiType } from '@/utils/constant';

interface IProps extends PopupBoxProps {
    row?: Record<string, any>;
    callBack?: () => Promise<void>;
}
const props = defineProps<IProps>();

interface Dialog {
    title: string;
    width: number;
    detail?: Record<string, any>;
}
const dialog = reactive<Dialog>({
    title: '新建Spi',
    width: 900,
    detail: undefined
});

const formData = reactive<any>({
    id: undefined,
    handlerName: '',
    spiType: '',
    handlerClass: '',
    description: ''
});
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<FormRules<any>>({
    handlerName: [{ required: true, message: '请输入显示名称', trigger: ['blur', 'change'] }],
    spiType: [{ required: true, message: '请选择类型', trigger: ['blur', 'change'] }],
    handlerClass: [{ required: true, message: '请输入类路径', trigger: ['blur', 'change'] }]
});
// 是否为编辑
const isEdit = (par?: boolean): boolean => {
    if (par === undefined) {
        return dialog.title.includes('修改');
    } else {
        return dialog.title.includes('修改') && par;
    }
};
const buildForm = () => {
    let tergetData = JSON.parse(JSON.stringify(formData));
    return tergetData;
};
// 提交接口请求
const { run, loading } = useRequest(
    () => {
        return runSpiService[isEdit() ? 'edit' : 'create'](buildForm());
    },
    {
        manual: true,
        onSuccess(res) {
            ElNotification({
                title: `${isEdit() ? '修改' : '新建'}成功！`,
                type: 'success'
            });
            closeDialog();
        }
    }
);

// 表单提交
const submitForm = () => {
    ruleFormRef.value?.validate(valid => {
        valid && run();
    });
};
//关闭弹框
const closeDialog = () => {
    props.close();
    props.callBack?.();
};

// 打开弹框
const openDialog = () => {
    if (props.row) {
        dialog.title = props.callBack ? '修改Spi' : '查看Spi';
        dialog.detail = JSON.parse(JSON.stringify(props.row));
        formData.id = props.row?.id;
        Object.keys(formData).forEach(key => {
            formData[key] = props.row?.[key];
        });
    } else {
        delete formData.id;
    }
};

const init = () => {
    openDialog();
};
init();
</script>
<style scoped lang="scss">
.create-edit-modal-wrapper {
    .el-form {
        display: flex;
        flex-wrap: wrap;
        .el-form-item {
            width: calc((100% - 10px) / 2);
        }
        .el-form-item:nth-child(even) {
            margin-left: 10px;
        }
        :deep(.protocol-box) {
            .el-form-item__content {
                display: flex;
                .el-select {
                    flex: 1;
                }
                .el-select + .el-select {
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>
